<template>
    <div class="app">
        <h1>{{msg}},{{studentName}}</h1>

        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传值 -->
        <School
            :getSchoolName="getSchoolName"
        ></School>

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传值（第一种写法） -->
        <Student @atGuiGu="getStudentName" @click.native.once="show"></Student>

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传值（第二种写法） -->
        <!-- <Student ref="student"></Student> -->
    </div>
</template>

<script>
    import Student from './components/Student.vue';
    import School from './components/School.vue';

    export default {
        name:"App",
        data(){
            return {
                msg:"你好啊",
                studentName:""
            }
        },
        components:{
            Student,
            School,
        },
        methods:{
            getSchoolName(name){
                console.log("app收到了学校名",name);
            },
            getStudentName(name){
                console.log("app收到了学生名",name);
                this.studentName = name;
            },
            show(){
                alert(222);
            }
        },
        //mounted写在哪个组件里，就是哪个组件挂载完毕
        mounted(){
            /* setTimeout(() => {
                console.log("等待一秒后再绑定自定义事件");
                this.$refs.student.$on("atGuiGu",this.getStudentName);
            }, 1000); */
        }
    }
</script>

<style scoped>
    .app{
        background-color: gray;
        padding: 5px;
    }
</style>
